import FormElement from "./form-element";
import FieldConfig from "./field-config";
import DyForm from "../../DyForm";
import {GRID_SPAN} from "../../tailwind";

export default abstract class BaseFormElement<V> implements FormElement<V> {
    protected readonly id: string
    protected readonly height: string
    protected readonly _container: HTMLDivElement
    protected readonly _elContainer: HTMLDivElement

    protected constructor(protected config: FieldConfig, height: number, protected form: DyForm) {
        this.id = self.crypto.randomUUID()
        this.height = `${height}px`
        this._container = this.genContainer()
        this._elContainer = this.genElContainer()
        this._container.appendChild(this._elContainer)
    }

    protected genContainer() {
        const container = document.createElement('div')
        container.style.height = this.height
        container.classList.add("grid", "grid-cols-1", "gap-x-6", "gap-y-8", "w-full", "relative")
        const width = this.config.width;
        if (width > 1 && width <= 10) {
            const widthNum = Math.floor(width);
            container.classList.add(GRID_SPAN[widthNum])
        }
        return container
    }

    protected genElContainer() {
        const el = document.createElement('div');
        el.classList.add("mt-2")
        return el
    }

    getEl(): HTMLElement {
        return this._container
    }

    abstract getName(): string

    abstract getValue(): V

    public getConfig() {
        return this.config
    }

}
